<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人贷款</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../plugins/mui/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/my/fund/index.css"/>
    <script src="../../js/statistics.js"></script>
    <script src="../../js/fontset.js"></script>
    <style>
    	.loan-top{
    		margin-top: 8.67vw;
    	}
    	.loan-tit{
    		font-size: .13rem;
    		line-height: 1.4;
    		margin:1vw 0 2vw 0;
    	}
    	.loan-money{
    		font-size: .35rem;
    		line-height: 1.4;
    	}
    	.loan-sm{
    		font-size: .2rem;
    	}
    	.loan-bottom{
    		position: absolute;
    		bottom: 0;
    		left: 0;
    		font-size: .12rem;
    		width: 100%;
    		display: flex;
    		align-items: center;
    	}
    	.card-navigate-right{
    		padding-right: 18px;
    	}
    	.card-navigate-right:after{
    		right: 0;
    		content: '\e583';
    		font-family: Muiicons;
		    font-size: inherit;
		    line-height: 1;
		    position: absolute;
		    top: 50%;
		    display: inline-block;
		    -webkit-transform: translateY(-50%);
		    transform: translateY(-50%);
		    text-decoration: none;
		    -webkit-font-smoothing: antialiased;
    	}
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav header">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">个人贷款</h1>
</header>
<div class="mui-content" id="content">
</div>
<script type="text/javascript" src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
<script src="../../plugins/mui/mui.min.js"></script>
<!--<script type="text/javascript" src="../plugins/mui/update.js"></script>-->
<script src="../../js/getApiToken.js"></script>
<script src="../../js/md5.js"></script>
<script src="../../plugins/template/template.js" ></script>
<script src="../../js/life_housekeeper/windowTitleView.js"></script>
<script type="text/html" id="contentTpl">
	<div class="banner">
		<img src="../../images/my/fund/fund-banner-1.png" alt="背景图" />
		<div class="fund-userInfo">
			<span class="loan-top">剩余应还本金（元）</span>
			<span class="loan-money">{{bjye}}</span>
			<span class="loan-tit">贷款总额（元）</span>
			<span class="userInfo-money loan-sm">{{sqje}}</span>
			<span class="loan-bottom"><i class="icon icon-show"></i>货款利率（月）：{{jkyll | yllFormat}}%</span>
		</div>
	</div>
	<div class="card">
		<div class="card-header"><i class="header-icon"></i>个人信息</div>
		<div class="card-content">
			<div class="card-tab-view">
				<div class="card-cell-item">
					<div class="mui-table">
						<div class="mui-col-xs-5 mui-table-cell"><span class="item-tit">职工账户</span></div>
						<div class="mui-col-xs-7 mui-table-cell mui-text-right"><span>{{spcode}}</span></div>
					</div>
				</div>
				<div class="card-cell-item">
					<div class="mui-table">
						<div class="mui-col-xs-5 mui-table-cell"><span class="item-tit">申请编号</span></div>
						<div class="mui-col-xs-7 mui-table-cell mui-text-right"><span>{{sqbh}}</span></div>
					</div>	
				</div>
				<div class="card-cell-item">
					<div class="mui-table">
						<div class="mui-col-xs-5 mui-table-cell"><span class="item-tit">申请日期</span></div>
						<div class="mui-col-xs-7 mui-text-right mui-ellipsis-2 mui-table-cell"><span>{{sqrq}}</span></div>
					</div>	
				</div>
			</div>
		</div>
	</div>
	<div class="card">
		<div class="card-header"><i class="header-icon"></i>贷款信息</div>
		<div class="card-content">
			<div class="card-tab-view">
				<div class="card-cell-item">
					<div class="mui-table">
						<div class="mui-col-xs-5 mui-table-cell"><span class="item-tit">还款明细</span></div>
						<div class="mui-col-xs-7 mui-table-cell mui-text-right" id="loanDetail" ><span class="card-navigate-right">{{sqqx}}期</span></div>
					</div>
				</div>
				<div class="card-cell-item">
					<div class="mui-table">
						<div class="mui-col-xs-5 mui-table-cell"><span class="item-tit">每月还款（等额）</span></div>
						<div class="mui-col-xs-7 mui-table-cell mui-text-right"><span>{{yhje}}</span></div>
					</div>	
				</div>
				<div class="card-cell-item">
					<div class="mui-table">
						<div class="mui-col-xs-5 mui-table-cell"><span class="item-tit">贷款银行</span></div>
						<div class="mui-col-xs-7 mui-text-right mui-ellipsis-2 mui-table-cell"><span>{{ocidname}}</span></div>
					</div>	
				</div>
				<div class="card-cell-item">
					<div class="mui-table">
						<div class="mui-col-xs-5 mui-table-cell"><span class="item-tit">还款账号</span></div>
						<div class="mui-col-xs-7 mui-text-right mui-ellipsis-2 mui-table-cell"><span>{{hkzh}}</span></div>
					</div>	
				</div>
				<div class="card-cell-item">
					<div class="mui-table">
						<div class="mui-col-xs-5 mui-table-cell"><span class="item-tit">还款卡号</span></div>
						<div class="mui-col-xs-7 mui-text-right mui-ellipsis-2 mui-table-cell"><span>{{xykh}}</span></div>
					</div>	
				</div>
			</div>
		</div>
	</div>
</script>
<script type="text/javascript">
	mui.init();
	mui.plusReady(function(){
		var self = plus.webview.currentWebview(),
			spcode = self.spcode,
			data = {
				spCode:spcode,
				flag:1
			};
			
			loanInfo(data);
//			content = document.getElementById("content"),
//			contentTpl = document.getElementById("contentTpl"),
//			contentHtml = template('contentTpl',info);
			//content.innerHTML = contentHtml;
			//document.querySelectorAll('.fund-money')[0].innerHTML = info.spmend;
//			console.log(JSON.stringify(info));
			
	})
	template.helper('yllFormat',function(yll){
		if(yll){
			var c =(parseFloat(yll)/100).toFixed(2);
			return c;
		}	
	});	

	function loanInfo(data){
		plus.nativeUI.showWaiting();
		myAjax('home/provident/getLoanNumber','post',data,function(e){
			if(e.code == 0){
				if(!e.data.body || e.data.body == ''){
					return;
				}
				var sqbh = e.data.body.list.acc_info[0].sqbh;
				myAjax('home/provident/getLoanInfo','post',{sqbh:sqbh},function(e){
					plus.nativeUI.closeWaiting();
					if(e.code == 0){
						//console.log(JSON.stringify(e.data));
						if(!e.data.body || e.data.body == ''){
							return;
						}
						var loanInfo = e.data.body.list.acc_info[0],
							tranTime= e.data.head.trantime || new Date().getFullYear() + '',
							tranYear = tranTime.substring(0,4),
						    content = document.getElementById("content"),
						    contentHtml = template('contentTpl',loanInfo);
						    content.innerHTML = contentHtml;
						    
						mui('#content').on('tap','#loanDetail',function(e){
							var viewOptions = {
								url:'fund-loan-list.html',
								id:'fund-loan-list'
							},
							extras ={
								sqbh:sqbh,
								hkms:loanInfo.hkms,
								nf:tranYear
							},
							titleOptions = {
								backImg:'whiteBack'
							};
							addTitleView(viewOptions,extras,titleOptions);
						})
//						var paymentData = {
//							sqbh:sqbh,
//							hkms:loanInfo.hkms,
//							nf:2017
//						}
//						myAjax('home/provident/getRepaymentInfo','post',paymentData,function(e){
//							plus.nativeUI.closeWaiting();
//							if(e.code == 0){
//								if(!e.data.body || e.data.body == ''){
//									return;
//								}
//							}else{
//								mui.toast(e.message);
//							}
//						});
						
					}else{
						mui.toast(e.message);
					}
				});
			}else{
				plus.nativeUI.closeWaiting();
			}
		})
	}

</script>
</body>
</html>
